.bgbox{
    width: 100%;
overflow-y: scroll;
}

.swiper-container{
    height: 200px;
    background: skyblue;
    img{
        width: 100%;
        height: 100%;
    }
}

.main{
    width: 100%;
    padding: 20px 15px 15px 15px;
    background: #fff;
    
}
.one{
    width: 100%;
    height: 150px;
    
}
.box1{
    position: relative;
    width: 150px;
    height: 150px;
    background:url(../../assets/imgs/index-card-rank.png) no-repeat ;
    background-color: rgba(21, 146, 204, 1);
    background-position: -21px 21px;
    background-size: 121px;
    border-radius: 15px;
}
.day{
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
    font-weight: bold;
    color: rgba(0, 78, 115, 1);
}
.num{
    position: absolute;
    bottom: 20px;
    right: 10px;
    font-size: 80px;
    font-weight: bold;
    color: #fff;
}
.box2{
    position: relative;
    height: 150px;
    width: 212px;
    background: url(../../assets/imgs/index-card-sum.png) no-repeat;
    background-color: rgba(123, 203, 245, 1);
    border-radius: 25px;
    background-position: 5px 21px;
    background-size: 121px;
    border-radius: 15px;
}
.sum{
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
    font-weight: bold;
    color: rgba(0, 78, 115, 1);
}
/* 今日打卡 */
.dayplay{
    position: absolute;
    bottom: 30px;
    right: 20px;
    font-size: 16px;
    font-weight: bold;
    color: rgba(0, 78, 115, 1);
    border: 3px solid rgba(0, 81, 119, 1);
    padding: 5px 10px;
    border-radius: 20px;
}
/* 已打卡 */
.clocked {
    position: absolute;
    bottom: 30px;
    right: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
   background-color: rgba(0, 78, 115, 1);
    border: 3px solid rgba(0, 81, 119, 1);
    padding: 5px 10px;
    border-radius: 20px;
  }
.box3{
    position: relative;
    width: 180px;
    height: 110px;
    background: url(../../assets/imgs/index-card-data.png) no-repeat center;
    background-size: 180px;
    border-radius: 15px;
}
.sports{
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.box4{
    position: relative;
    width: 185px;
    height: 110px;
    border-radius: 15px;
    background: url(../../assets//imgs/index-card-badge.png) no-repeat;
   background-color: #ccc;
    background-position: 6px 10px;
    background-size: 100px;
    .day{
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 20px;
        font-weight: bold;
        color: rgba(0, 78, 115, 1);
    }
    .num{
        position: absolute;
        bottom: 10px;
        right: 30px;
        font-size: 80px;
        font-weight: bold;
        color: #fff;
    }
    .mei{
        position: absolute;
        bottom: 20px;
        right: 10px;
        font-size: 18px;
        font-weight: bold;
        color: rgba(0, 81, 119, 1);
    }
}
.main2{
    width: 100%;
    padding: 5px 15px 15px 15px;
    background: #fff;

}
.box5{
    position: relative;
    width: 385px;
    height: 110px;
    background: red;
    border-radius: 15px;
}
.last1{
    background: url(../../assets/imgs/course-img04.jpg) no-repeat center;
    background-size: 400px;
    background-position: 0 -30px;
}
.last2{
    background: url(../../assets/imgs/course-img02.png) no-repeat center;
    
}
// .foot{
//     width: 100%;
//     height: 77px;
//     background: #ccc;
// }


  